<!DOCTYPE html>
<head>
    <title>我的第二个vue程序</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
</head>
<body>
    <div id = "d1">
        <a v-bind:href="url" target="_blank">百度</a> 
        <br/>
        <a href="http://www.baidu.com" target="_blank">百度</a> 

    </div>
    <br/>
    <p>-------------------------------</p>
    <br/>
    <div id = "d2">
        <a v-on:click="hello()" href="">fun1</a> 
        <br/>
        <a @click="hello2()" href="">hello</a>
    </div>

    <br/>
    <p>-------------------------------</p>
    <br/>
    <div id = "d3">
        <a :[key]="url" target="_blank">百度</a> 
        <br/>
        <a @[event]="fn2()">hello</a>
    </div>


</body>
<script>
/**
 *  指令：以v-为前缀的特殊attribute，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM
 *  如: <p v-if="seen">现在你看我了</p>
 * 
 *  参数：一些指令能够接收一个“参数”，在指令名称之后以冒号显示。例如，v-bind指令作用于响应式地更新HTML attribute:
 *  <a v-bind:href="url">...</a>  在这里href时参数，告知 v-bind 指令将该元素的href attribute 与表达式 url 的值绑定
 *  <a v-on:click="doSomething">...</a>  v-on 指令，它用于监听 DOM 事件
 * 
 *  动态参数
 *  从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
 *  <a v-bind:[attributeName]="url"> ... </a>
 *  你可以使用动态参数为一个动态的事件名绑定处理函数：
 *  <a v-on:[eventName]="doSomething"> ... </a>
 * 
 * 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：
    <!-- 这会触发一个编译警告 -->
    <a v-bind:['foo' + bar]="value"> ... </a>

    在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

    v-bind 缩写
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>
    <!-- 动态参数的缩写 (2.6.0+) -->
    <a :[key]="url"> ... </a>

    
    
    v-on 缩写
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
    <!-- 动态参数的缩写 (2.6.0+) -->
    <a @[event]="doSomething"> ... </a>


 * 
*/

var vue1 = new Vue({
    el:"#d1",
    data:{"url": "http://www.baidu.com"}
});
//vue里面定义的function要在vue里面
var vue2 = new Vue({
    el:"#d2",
    data:{
    },methods:{
        // vue定义function
        hello:function(){
            console.log("hello()")  
         window.open("https://www.baidu.com") 
        },
        //vue定义的function调用js function
        hello2:function(){
            myhello();
        }
    }
});


var vue3 = new Vue({
    el:"#d3",
    data:{
        "key": "href",
        "url": "http://www.baidu.com",
        "event": "click",
    }
});

function fun1(){ console.log("fun1()")   }




// //自定义函数的3种方式
// //1.函数声明
function myhello(){  
    console.log("hello()")  
    window.open("https://www.baidu.com") 
 }
// //2.对象变量方式,对象变量式会在定义的时候跑
// var fn = new function(){
//     //window.location.href="https://www.baidu.com"; 
//    // window.open("https://www.baidu.com")
//    console.log("fn()")  
// }
// //3.箭头函数
// var fn2 = () => {   console.log("fn2()")  }



</script>

</html>